<ui:composition template="master.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="title">
        Home
    </ui:define>

    <ui:define name="content">

        <!-- 
        <hr />
        <h:form>
            <h:commandButton action="betaalwijzeOverzicht.xhtml" value="Geef alle Betaalwijzen"/>
        </h:form>
        <br />
        <hr />
        -->
        <h1>Reis zoeken</h1> <br />
        <p>
            Om een geschikte reis te zoeken, kan u het onderstaande zoekformulier gebruiken. Na het selecteren kunt u deze reis boeken. (Om een reis te boeken zal uw logingegevens worden opgevraagd).
        </p>
        <h:form>
            <table>
                <tr>
                    <th>Vakantie</th>
                    <th>Vakantie periode</th>
                </tr>
                <tr>
                    <td>
                        <br />
                        Vertrek Stad:
                        <br />

                        <p:selectOneMenu id="stad_id_vertrek" value="#{controllerReisZoeken.stad_id_vertrek}" effect="fade" height="200">
                            <f:selectItem itemLabel="--Select stad--" itemValue="-1" />
                            <c:forEach items="#{controllerReisZoeken.allSteden}" var="row">
                                <f:selectItem itemLabel="#{row.stadNaam}" itemValue="#{row.id}" />
                            </c:forEach>
                        </p:selectOneMenu>
                        <br /><br />
                    </td>
                    <td>
                       
                        Begin datum:
                         <br />
                        <p:calendar value="#{controllerReisZoeken.vertrekdatum}" id="popupButtonCalVertrek" effect="explode" /> 

                        <p:dialog header="Selected Dates" widgetVar="dialog" showEffect="explode" hideEffect="explode" >  
                            <h:panelGrid id="displayVertrek" columns="2" cellpadding="5">

                                <h:outputText value="Popup Button Date: " />  
                                <h:outputText value="#{controllerReisZoeken.vertrekdatum}" id="popupButtonDateVertrek">  
                                    <f:convertDateTime pattern="d/M/yyyy"/>  
                                </h:outputText>

                            </h:panelGrid>  
                        </p:dialog>  
                    </td>
                </tr>
                <tr>
                    <td>

                        Aankomst Stad:
                        <br />

                        <p:selectOneMenu id="stad_id_aankomst" value="#{controllerReisZoeken.stad_id_aankomst}" effect="fade" height="200">
                            <f:selectItem itemLabel="--Select stad--" itemValue="-1" />
                            <c:forEach items="#{controllerReisZoeken.allSteden}" var="row">
                                <f:selectItem itemLabel="#{row.stadNaam}" itemValue="#{row.id}" />
                            </c:forEach>
                        </p:selectOneMenu>
                        <br />
                    </td>
                    <td>
                        Einddatum:
                        <br />
                        <p:calendar value="#{controllerReisZoeken.einddatum}" id="popupButtonCalAankomst" effect="explode" /> 

                        <p:dialog header="Selected Dates" widgetVar="dialog" showEffect="explode" hideEffect="explode">  
                            <h:panelGrid id="displayAankomst" columns="2" cellpadding="5">

                                <h:outputText value="Popup Button Date: " />  
                                <h:outputText value="#{controllerReisZoeken.einddatum}" id="popupButtonDateAankomst">  
                                    <f:convertDateTime pattern="d/M/yyyy"/>  
                                </h:outputText>

                            </h:panelGrid>  
                        </p:dialog>  
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td colspan="2"><br />Aantal plaatsen: 
                        <h:inputText id="aantalpersonen" size="3" value="#{controllerReisZoeken.aantalpersonen}" validatorMessage="Er is een ongeldig aantal personen opgegeven.">
                            <f:validateLongRange minimum="1" maximum="1000" /> 
                        </h:inputText> <p:message for="aantalpersonen"></p:message></td>
                </tr>
                <tr>
                    <td>
                        <br />
                        Vervoersmiddeltype:
                        <br />

                        <p:selectOneMenu validatorMessage="Gelieve een vervoersmiddel te selecteren." id="vervoersmiddeltype" value="#{controllerReisZoeken.vervoersmiddel_id}" effect="fade" >
                            <f:selectItem  itemLabel="--Select vervoersmiddel--"  />
                            <c:forEach items="#{controllerReisZoeken.allVervoersMiddelTypes}" var="row">
                                <f:selectItem itemLabel="#{row.beschrijving}" itemValue="#{row.id}" />
                            </c:forEach>
                            <f:validateRequired />
                        </p:selectOneMenu>
                        <p:message for="vervoersmiddeltype"></p:message>
                        <br /><br />
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <br />
                        <h:commandButton value="Zoeken" action="#{controllerReisZoeken.zoekenBasic()}" />
                       
                    </td>
                </tr>
            </table>
        </h:form>

        <br />
    </ui:define>
</ui:composition>
